<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar  title="新闻资讯" left-text="返回" left-arrow  @click-left="clickLeft"/>

        <!-- 资讯列表 -->
      <div class="list">
        <van-card
            @click="cardClick(item.id)"
            v-for="item in newsList" 
            :key="item.id"
            :tag="item.click>0?'热门':''"
            :desc="item.zhaiyao"
            :title="item.title"
            :thumb="item.img_url"           
            >   
            <template #price>
                <span>发布：{{ item.add_time | fmt  }}</span>
            </template>
            <template #num>
                <span>点击:{{ item.click }}</span>
            </template>
        </van-card>
      </div>
    </div>
</template>

<script>
export default{
    data(){
        return {
            newsList:[]
        }
    },
    methods:{
        cardClick(newsid) {
            // 通过vue-router编程式导航将页面跳转到newsinfo.vue中同时携带id参数过去
            this.$router.push({ name:'newsinfo',
            params:{id:newsid} });
        },
        clickLeft() {
            // 点击按钮以后返回到上一个页面
            // this.$router.push({ path:'/home' })
            this.$router.go(-1);
        },
        getNewsList(){
            this.$http.get('http://210.21.98.31:6007/api/getnewslist')
            .then(res=>{
                this.newsList = res.data.message;
            })
        }
    },
    mounted(){
        this.getNewsList();
    }
}
</script>

<style scoped>

</style>